import { Suspense } from "react"
import { Shell } from "@/components/shell"
import { DataTableSkeleton } from "@/components/data-table/data-table-skeleton"
import { InformationButton } from "@/components/information/information-button"

import { PcrTable } from "@/lib/pcr/table/pcr-table";
import { getPcrPoList } from "@/lib/pcr/service";

export const metadata = {
  title: "PCR 관리",
  description: "Purchase Change Request를 생성하고 관리할 수 있습니다.",
};

async function PcrTableWrapper() {
  // 기본 데이터 조회 (EvcP용 - 모든 데이터 조회)
  const tableData = await getPcrPoList({
    page: 1,
    perPage: 10,
  });

  return <PcrTable tableData={tableData} isEvcpPage={true} currentVendorId={undefined} />;
}

export default function PcrPage() {
  return (
    <Shell className="gap-4">
      {/* ═══════════════════════════════════════════════════════════════ */}
      {/* 페이지 헤더 */}
      {/* ═══════════════════════════════════════════════════════════════ */}
      <div className="flex items-center justify-between space-y-2">
        <div className="flex items-center justify-between space-y-2">
          <div>
            <div className="flex items-center gap-2">
              <h2 className="text-2xl font-bold tracking-tight">
                PCR 관리
              </h2>
              <InformationButton pagePath="evcp/pcr" />
            </div>
            <p className="text-muted-foreground">
              Purchase Change Request를 생성하고 관리할 수 있습니다. PCR 승인 상태, 변경 구분, PO/계약 정보 등을 확인할 수 있습니다.
            </p>
          </div>
        </div>
      </div>

      {/* ═══════════════════════════════════════════════════════════════ */}
      {/* 메인 테이블 */}
      {/* ═══════════════════════════════════════════════════════════════ */}
      <Suspense
        fallback={
          <DataTableSkeleton
            columnCount={12}
            searchableColumnCount={2}
            filterableColumnCount={3}
            cellWidths={["8rem", "8rem", "12rem", "12rem", "10rem", "12rem"]}
            shrinkZero
          />
        }
      >
        <PcrTableWrapper />
      </Suspense>
    </Shell>
  );
}